<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础用法</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__upload-item">
               <uv-upload
                  :fileList="fileList1"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="1"
                  multiple
                  :maxCount="10"
               ></uv-upload>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">上传视频</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__upload-item">
               <uv-upload
                  :fileList="fileList2"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="2"
                  multiple
                  :maxCount="10"
                  accept="video"
               ></uv-upload>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">文件预览</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__upload-item">
               <uv-upload
                  :fileList="fileList3"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="3"
                  multiple
                  :maxCount="10"
                  :previewFullImage="true"
               ></uv-upload>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">隐藏上传按钮</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__upload-item">
               <uv-upload
                  :fileList="fileList4"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="4"
                  multiple
                  :maxCount="2"
               ></uv-upload>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">限制上传数量</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__upload-item">
               <uv-upload
                  :fileList="fileList5"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="5"
                  multiple
                  :maxCount="3"
               ></uv-upload>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义上传样式</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__upload-item">
               <uv-upload
                  :fileList="fileList6"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="6"
                  multiple
                  :maxCount="1"
                  width="250"
                  height="150"
               >
                  <image
                     src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
                     mode="widthFix"
                     style="width: 250px; height: 150px"
                  ></image>
               </uv-upload>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 响应式数据
const fileList1 = ref([]);
const fileList2 = ref([]);
const fileList3 = ref([
   {
      url: 'https://dummyimage.com/300x300/4caf50/ffffff&text=Image+1',
   },
]);
const fileList4 = ref([
   {
      url: 'https://dummyimage.com/300x300/2196f3/ffffff&text=Image+1',
   },
   {
      url: 'https://dummyimage.com/300x300/ff9800/ffffff&text=Image+2',
   },
]);
const fileList5 = ref([]);
const fileList6 = ref([]);
const fileList7 = ref([]);

// 获取对应的文件列表
const getFileList = (name: string) => {
   const fileListMap: Record<string, any> = {
      '1': fileList1,
      '2': fileList2,
      '3': fileList3,
      '4': fileList4,
      '5': fileList5,
      '6': fileList6,
      '7': fileList7,
   };
   return fileListMap[name];
};

// 删除图片
const deletePic = (event: any) => {
   const fileList = getFileList(event.name);
   if (fileList) {
      fileList.value = fileList.value.filter((item: any, index: number) => {
         return index !== event.index;
      });
   }
};

// 新增图片
const afterRead = async (event: any) => {
   // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
   let lists = [].concat(event.file);
   const fileList = getFileList(event.name);
   if (!fileList) return;

   let fileListLen = fileList.value.length;
   lists.map((item: any) => {
      fileList.value.push({
         ...item,
         status: 'uploading',
         message: '上传中',
      });
   });

   fileList.value = fileList.value.filter((item: any, index: number) => {
      return index >= 0;
   });

   for (let i = 0; i < lists.length; i++) {
      try {
         const result = await uploadFilePromise(lists[i].url);
         let item = fileList.value[fileListLen];
         fileList.value.splice(
            fileListLen,
            1,
            Object.assign(item, {
               status: 'success',
               message: '',
               url: result,
            })
         );
      } catch (error) {
         // 上传失败，更新状态为失败
         let item = fileList.value[fileListLen];
         fileList.value.splice(
            fileListLen,
            1,
            Object.assign(item, {
               status: 'failed',
               message: '上传失败',
            })
         );
         console.error('上传失败:', error);
      }
      fileListLen++;
   }
};

// 上传文件 - 模拟上传过程
const uploadFilePromise = (url: string): Promise<string> => {
   return new Promise((resolve, reject) => {
      // 模拟上传过程，避免真实网络请求
      setTimeout(
         () => {
            // 模拟上传成功，返回原始URL作为上传后的URL
            resolve(url);
         },
         1000 + Math.random() * 2000
      ); // 1-3秒的随机延迟模拟网络请求
   });
};
</script>

<style lang="scss" scoped>
.uv-page {
   &__upload-item {
      margin-top: 5px;
   }
}
</style>
